let arr = []
// 1. 发送短信验证码模块
const code = document.querySelector('.code')
// 节流阀
let flag = true//为防止多次点击
code.addEventListener('click', function () {
    if (flag) {
        flag = false
        let time = 5
        code.innerHTML = `0${time}s重新获取`
        let timeid = setInterval(function () {
            time--
            if (time) {
                flag = false
                code.innerHTML = `0${time}s后重新获取`
            } else {
                clearInterval(timeid)
                flag = true
                code.innerHTML = `发送验证码`
            }
        }, 1000)
    }
})

// 2. 验证用户名, 用户名的正则表达式 /^[a-zA-Z0-9-_]{6,10}$/
const usernameEle = document.querySelector('input[name="username"]')
function verifyUsername() {
    const reg = /^[a-zA-Z0-9-_]{6,10}$/
    if (reg.test(usernameEle.value) !== true) {
        usernameEle.nextElementSibling.innerHTML = '用户名不符合要求'
        return false
    } else {
        usernameEle.nextElementSibling.innerHTML = ""
        return true
    }
}
usernameEle.addEventListener('change', verifyUsername)

// 3. 验证手机号, 手机号的正则表达式 /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
const phoneEle = document.querySelector('input[name="phone"]')
function verifyPhone() {
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    if (reg.test(phoneEle.value) !== true) {
        phoneEle.nextElementSibling.innerHTML = '手机号不符合要求'
        return false
    } else {
        phoneEle.nextElementSibling.innerHTML = ""
        return true
    }
}
phoneEle.addEventListener('change', verifyPhone)

// 4. 验证的是验证码, 验证码的正则表达式 /^\d{6}$/
const codeEle = document.querySelector('input[name="code"]')
function verifyCode() {
    const reg = /^\d{6}$/
    if (reg.test(codeEle.value) !== true) {
        codeEle.nextElementSibling.innerHTML = '验证码不符合要求'
        return false
    } else {
        codeEle.nextElementSibling.innerHTML = ""
        return true
    }
}
codeEle.addEventListener('change', verifyCode)

// 5. 验证的是密码框, 密码框的正则表达式 /^[a-zA-Z0-9-_]{6,20}$/
const passwordEle = document.querySelector('input[name="password"]')
function verifyPassword() {
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (reg.test(passwordEle.value) !== true) {
        passwordEle.nextElementSibling.innerHTML = '密码不符合要求'
        return false
    } else {
        passwordEle.nextElementSibling.innerHTML = ""
        return true
    }
}
passwordEle.addEventListener('change', verifyPassword)

// 6. 确认密码的验证
const confirmEle = document.querySelector('input[name="confirm"]')
function verifyConfirm() {
    if (confirmEle.value !== passwordEle.value) {
        confirmEle.nextElementSibling.innerHTML = '密码不一致'
        return false
    } else {
        confirmEle.nextElementSibling.innerHTML = ""
        return true
    }
}
confirmEle.addEventListener('change', verifyConfirm)

// 7. 点击 我同意 按钮, 让i标签添加或者移除 icon-queren2 这个类
const queren = document.querySelector('.icon-queren')
queren.addEventListener('click', function () {
    queren.classList.toggle('icon-queren2')
    return
})

// 8. 提交的整体验证
const form = document.querySelector("form")
form.addEventListener("submit", function (e) {
    e.preventDefault()
    const ret1 = verifyUsername()
    if (!ret1) {
        return
    }
    const ret2 = verifyPhone()
    if (!ret2) {
        return
    }
    const ret3 = verifyCode()
    if (!ret3) {
        return
    }
    const ret4 = verifyPassword()
    if (!ret4) {
        return
    }
    const ret5 = verifyConfirm()
    if (!ret5) {
        return
    }
    const ret6 = queren.classList.contains('icon-queren2')
    if (!ret6) {
        alert("请勾选同意按钮")
        return
    }
    const obj = {
        uname: usernameEle.value,
        password: passwordEle.value,
        phone: phoneEle.value,
    }
    arr.push(obj)
    localStorage.setItem("register", JSON.stringify(arr))
    location.href = "../html/login.html"
    alert("注册成功")
})
 shoppingsss(goodArr)